<template>
	<view class="confirm-order">
		<view class="card content-box">
			<view class="community">重庆市南川区</view>
			<view class="address">{{community}}</view>
			<view class="name">{{name}}<text class="phone-number">{{phone}}</text></view>
		</view>
		<view class="card content-box">
			<view class="product-info">
				<image :src="detail.imageKey" mode="aspectFill" :draggable="false" />
				<view class="rignt">
					<view class="product-name">
						{{detail.name}}
						<view class="price">¥ {{detail.price}}</view>
					</view>
					<view class="numbox">
						数量：<uni-number-box v-model="number" :min="1" />
					</view>
				</view>
			</view>
		</view>
		<view class="card content-box">
			<view class="delivery-type">
				<view class="label">配送方式：</view>
				<uni-data-select v-model="deliveryType" :localdata="range" @change="change"></uni-data-select>
			</view>
			<view class="flex justify-between align-center margin-tb" v-if="deliveryType === 1">
				<view>配送费：</view>
				<view>¥ {{deliveryFees}}</view>
			</view>
		</view>
		<view class="fixed-bottom-box flex justify-between align-center">
			<view class="total-price">总计：<text class="text-price">{{(detail.price * number + deliveryFees).toFixed(2)}}</text></view>
			<button type="warn" class="margin-0 round" @click="success">立即下单</button>
		</view>
	</view>
</template>

<script>
import { placeOrder, payment, paymentResult } from '@/api/convenientServices'
	export default {
		data() {
			return {
				number: 1,
				detail: {},
				deliveryType: 0,
			    range: [
					{ value: 0, text: '自提' },
					{ value: 1, text: '送货上门' }
				],
				deliveryFees: 0
			}
		},
		computed: {
			name() {
				return this.$store.state.user.name
			},
			community() {
				return this.$store.state.user.community
			},
			phone() {
				return this.$store.state.user.phone
			}
		},
		methods: {
			change(e) {
			    if(e === 0) {
					this.deliveryFees = 0
				} else {
					this.deliveryFees = 2
				}
			},
			success() {
				placeOrder({list: new Array({id: this.detail.id, quantity: this.number}), deliveryType: this.deliveryType}).then(orderRes => {
					uni.login({
					  provider: 'weixin',
					  success: function (loginRes) {
						payment({code:loginRes.code,id: orderRes.data.id}).then(paymentRes => {
							uni.requestPayment({
								provider: 'wxpay',
								...paymentRes.data,
								success: function(res) {
									paymentResult({id: orderRes.data.id}).then(resultRes => {
										uni.showToast({title: '支付成功'})
										setTimeout(() => {
											uni.navigateBack({
												delta: 2
											})
										}, 1000)
									})
								},
								// 参数有问题则抛出错误
								fail: function(err) {
									uni.showToast({title: '支付失败'})
									setTimeout(() => {
										uni.navigateBack()
									}, 1000)
								},
							})
						})
					  }
					});
				})
			}
		},
		onLoad(e) {
			this.detail = JSON.parse(decodeURIComponent(e.content))
		}
	}
</script>

<style lang="scss" scoped>
.confirm-order {
	.content-box {
		padding: 30rpx;
		.community {
			font-size: 22rpx;
			color: #888;
		}
		.address {
			font-size: 28rpx;
			font-weight: bold;
			margin-top: 15rpx;
		}
		.name {
			font-size: 26rpx;
			margin-top: 15rpx;
			.phone-number {
				color: #888;
				margin-left: 20rpx;
			}
		}
		.product-info {
			display: flex;
			justify-content: space-between;
			image {
				width: 150rpx;
				height: 150rpx;
				border-radius: 16rpx;
				margin-right: 30rpx;
				flex-shrink: 0;
			}
			.rignt {
				width: 100%;
			}
			.product-name {
				font-size: 28rpx;
				display: flex;
				justify-content: space-between;
				margin-top: 10rpx;
				line-height: 1.4;
				.price {
					font-size: 26rpx;
					color: #FC0204;
					margin-left: 40rpx;
					flex-shrink: 0;
				}
			}
			.numbox {
				display: flex;
				align-items: center;
				margin-top: 25rpx;
			}
		}
		.delivery-type {
			.label {
				width: 50%;
				display: inline-block;
			}
			::v-deep .uni-stat__select {
				width: 50%;
				display: inline-flex;
			}
		}
	}
	.total-price {
		font-size: 24rpx;
		.text-price {
			font-size: 30rpx;
			font-weight: bold;
			color: #FC0204;
		}
	}
}
</style>
